body {
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
    height: 100vh;
    transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
}
.sidebar {
    width: 250px; /* 菜单栏宽度 */
    background-color: #f1f1f1; /* 菜单栏背景色 */
    color: #0d0d0d;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.3s; /* 菜单栏展开/收起的过渡效果 */
    overflow: hidden; /* 隐藏溢出内容 */
}
.sidebar.collapsed {
    width: 0; /* 收起状态的宽度 */
    padding: 0; /* 收起状态下的内边距 */
}
.sidebar h1 {
    font-size: 16px;
    margin: 0;
    display: block; /* 确保标题在收起状态下仍然可见 */
}
.sidebar.collapsed h1 {
    display: none; /* 收起状态下隐藏标题 */
}

.sidebar.collapsed a {
    display: none; /* 收起状态下隐藏链接 */
}

.sidebar.night-mode {
    background-color: #2f2f2f; /* 夜间主题背景 */
    color: #ffffff; /* 夜间主题文字颜色 */
}
.sidebar-n.night-mode {
    background-color: #2f2f2f; /* 夜间主题背景 */
    color: #ffffff; /* 夜间主题文字颜色 */
}

.user-info {
    width: 100%;
    height: 53px;
    background-color: #bababa;
}

.menu-list {
    width: 100%;
    padding: 1px 0;
}
.menu-list.collapsed {
    display: none; /* 收起状态下隐藏链接 */
}

.menu-item {
    padding: 10px;
    color: rgb(62, 62, 62);

    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 图标和文字之间的间距 */
}

.menu-list .menu-item:hover {
    background-color: #ebebeb;
    cursor: pointer;
}

.menu-list .menu-item.night-mode:hover {
    background-color: #6b6b6b;
    cursor: pointer;
}

.menu-list .menu-item img {
    width: 20px;
    height: 20px;
}

.menu-list .menu-item.night-mode img {
    width: 20px;
    height: 20px;

    color: white;
}

.session-history {
    margin-top: 1px;
    background-color: #f1f1f1;
}

.session-history.collapsed {
    display: none; /* 收起状态下隐藏链接 */
}
.session-history .session-item {
    font-size: 14px;
    color: rgb(127, 127, 127);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: relative;
}

.session-item {
    margin-top: 1px;
}

.session-history .session-item:hover {
    background-color: #ececec;
    color: rgb(59, 59, 59);
    cursor: pointer;
}

.icon-container {
    display: none; /* 默认隐藏图标 */
    position: absolute;
    right: 10px; /* 距离右侧的距离 */

    background-color: #ececec;
    padding: 8px;
}
.session-item:hover .icon-container {
    display: flex; /* 鼠标悬停时显示图标 */
}
.icon-container .icon {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    cursor: pointer;
    padding: 3px;
}

.icon-container .icon:hover {
    background-color: #d7d7d7;
}

.content {
    flex: 1;
    padding: 0;
    background-color: #dcdcdc; /* 主体内容背景色 */
    color: #333; /* 主体内容文字颜色 */
    display: flex;
    flex-direction: column;
    position: relative; /* 使按钮绝对定位 */
    transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
}
.toggle-button {
    position: absolute;
    top: 2px;
    left: 6px;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.toggle-button img {
    width: 20px;
    height: 20px;
}
h2 {
    color: #003366; /* 商务蓝 */
    text-align: center;
    padding: 8px;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid #ddd;
}
.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.message {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 12px;
    word-wrap: break-word;
    position: relative;
}
.user-message {
    background-color: #007bff; /* 更亮的蓝色 */
    color: #fff;
    align-self: flex-end;
}
.bot-message {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    align-self: flex-start;
    font-size: 15px;
    line-height: 1.6;
}
.message-time {
    font-size: 12px;
    color: #e0e0e0; /* 更亮的灰色，与深蓝色背景搭配 */
    margin-top: 4px;
    text-align: right;
}
.input-container {
    display: flex;
    gap: 10px;
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid #ddd;
}
select {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    background-color: #fff;
    cursor: pointer;
}
textarea {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    resize: none;
}
button {
    background-color: #003366; /* 商务蓝 */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
    background-color: #002244; /* 深蓝 */
}
/* 夜间主题样式 */
body.night-mode {
    background-color: #1e1e1e; /* 夜间主题背景 */
    color: #f0f0f0; /* 夜间主题文字颜色 */
}
.content.night-mode {
    background-color: #2a2a2a; /* 夜间主题主体内容背景 */
}
.bot-message.night-mode {
    background-color: #2a2a2a; /* 夜间主题回复背景 */
    color: #f0f0f0; /* 夜间主题回复文字颜色 */
    border: 1px solid #444; /* 夜间主题边框颜色 */
}
.bot-message.night-mode strong {
    color: #e89939; /* 夜间模式下strong标签的颜色 */
}
.user-message.night-mode {
    background-color: #0056b3; /* 夜间主题用户消息背景 */
}
.message-time.night-mode {
    color: #888; /* 夜间主题时间颜色 */
}
.bot-message.night-mode code {
    background-color: #333; /* 更深的背景颜色 */
    color: #f8f8f2; /* 更亮的文字颜色 */
}
.bot-message.night-mode pre {
    background-color: #333; /* 更深的背景颜色 */
    color: #f8f8f2; /* 更亮的文字颜色 */
}
.bot-message.night-mode a {
    color: #4da6ff; /* 更亮的蓝色 */
}
.bot-message.night-mode a:hover {
    color: #80c1ff; /* 更亮的蓝色悬停效果 */
}
